<html>
	<head>
		<meta charset="utf-8">
		<title>综合练习</title>
		<style>
			a:link, a:visited{
				text-decoration:none;
				color:#117799;
			}
			a:hover{
				color:red;
				text-decoration:underline;
			}
			a{
				font-family: 宋体;
				font-size: 14px;
				font-weight: bold;
			}
			.content{
				/*width: 1200px;*/
				/*height: 150px;*/
				background-color: #ccc;
				border:1px green solid;
				margin:50px auto;
			} 

			.tabl{
				/*border: 1px black solid;*/
				/*margin: 15px auto;*/

			}
			.news {
				width: 260px;
				border:1px red solid;
			}
			.book{
				width: 50px;
				float: left;
				border:1px green solid;
				/*margin:0px 5px;*/
				text-align: center;
			}
			.clear{
				clear: both;
				
			}
			input {
				width: 35px;
			}
		</style>
		<script>
			function appBack(obj) {
				obj.style.backgroundColor= "blue";

			}
			function disBack(obj) {
				obj.style.backgroundColor= "#ccc";
			}

			function shop_show(obj) {
				var tableObj = document.getElementById("tableAlert");
				if (tableObj.style.display == "block") {
					tableObj.style.display = "none";
				} else {
					tableObj.style.display = "block";
				}
				
			}
			function deleteProduct(obj) {
				if (aa = confirm("确定要删除该商品吗？")) {
					var trObj = document.getElementById(obj);
					// alert(trObj);
					trObj.parentNode.removeChild(trObj);
				} 
				totalPrice()

			}
			function totalPrice() {
				var tableObj = document.getElementById("tableAlert");
				var totalP = 0;
				var nowP = 0;
				var trObj = tableObj.rows;
				// alert(trObj.length);
				for (var i = 1; i < trObj.length; i++) {
					var tdObj = trObj[i].cells;
					price1 = parseInt(tdObj[2].innerHTML.substr(1));//市场价格
					price2 = parseFloat(tdObj[3].innerHTML.substr(1));//当前价格
					count = parseInt(tdObj[4].firstChild.value);//数量
					// alert(count);
					totalP += price1 * count;
					nowP += price2 * count;
				}
				var SpanObj = document.getElementById("total");
				SpanObj.innerHTML = "市场总价：" + totalP + "，当前总价：" + nowP;
			}

			window.onload = totalPrice;

		</script>
	</head>
	<body>
		<div class="content">
			<img src="image/index_30.jpg" onclick="shop_show(this)">
			<table id="tableAlert" class="tabl" rules="all" style="display:block;">
				<tr align="center">
					<td>商品名称</td>
					<td>商品积分</td>
					<td>市场价</td>
					<td>当前价</td>
					<td>数量</td>
					<td>删除</td>
				</tr>
				<tr align="center" id="shopping1" onmouseover="appBack(this)" onmouseout="disBack(this)">
					<td><a href="#">私募（首都披露资本博弈秘密的金融...）</a></td>
					<td>189</td>
					<td>￥32.00</td>
					<td>￥18.88（59折）</td>
					<td><input type="text" onblur="totalPrice()" value="1"></td>
					<td><a href="javascript:deleteProduct('shopping1')">删除</a></td>
				</tr>
				<tr align="center" id="shopping2" onmouseover="appBack(this)" onmouseout="disBack(this)">
					<td><a href="#">私募（首都披露资本博弈秘密的金融...）</a></td>
					<td>189</td>
					<td>￥32.00</td>
					<td>￥18.88（59折）</td>
					<td><input type="text" onblur="totalPrice()" value="1"></td>
					<td><a href="javascript:deleteProduct('shopping2')">删除</a></td>
				</tr>
				<tr align="center" id="shopping3" onmouseover="appBack(this)" onmouseout="disBack(this)">
					<td><a href="#">私募（首都披露资本博弈秘密的金融...）</a></td>
					<td>189</td>
					<td>￥32.00</td>
					<td>￥18.88（59折）</td>
					<td><input type="text" onblur="totalPrice()" value="1"></td>
					<td><a href="javascript:deleteProduct('shopping3')">删除</a></td>
				</tr>
				<tr align="center" id="shopping4" onmouseover="appBack(this)" onmouseout="disBack(this)">
					<td><a href="#">私募（首都披露资本博弈秘密的金融...）</a></td>
					<td>189</td>
					<td>￥32.00</td>
					<td>￥18.88（59折）</td>
					<td><input type="text" onblur="totalPrice()" value="1"></td>
					<td><a href="javascript:deleteProduct('shopping4')">删除</a></td>
				</tr>
			</table>
			<span id="total"></span>
		</div>

		<div class="news">
			<div class="book">历史</div>
			<div class="book">家教</div>
			<div class="book">文化</div>
			<div class="book">小说</div>
			<div class="book">更多</div>
			<div class="clear"></div>

		</div>
	</body>
</html>